<template>
    <div class="fund-list-container">
        <nut-popup position="bottom" v-model:visible="show">
            <nut-date-picker v-model="currentDate" :min-date="minDate" type="year-month" :max-date="maxDate"
                @confirm="popupConfirm" :is-show-chinese="true">
            </nut-date-picker>
        </nut-popup>
        <div style="height: 10px;"></div>
        <Filter :tabList="tabList" @onChange="handleChange"></Filter>
        <div class="fund-list-container-flex">
            <template :style="{ height: `${fundlistHeight}px` }" v-if="fundlistHeight && moneyList.length">
                <scroll-view :scroll-y="true" scrollAnchoring @scrolltolower="onScrollBottom"
                    :style="{ height: `${fundlistHeight}px` }">
                    <div class="flex-item" v-for="(item, index) in moneyList" :key="index">
                        <MoneyItem :info="item" v-if="item.id"></MoneyItem>
                    </div>
                    <div style="height: 10px;"></div>
                    <Loading :page="userFinanceDetail.currentPage" :total="totalPage" :loadingFlag="loadingFlag"
                        :tipFlag="tipFlag"></Loading>
                    <div style="height: 20px;"></div>
                </scroll-view>
            </template>
            <template v-else>
                <nut-empty description="无数据"></nut-empty>
            </template>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, reactive } from 'vue';
import Taro from '@tarojs/taro';
import moment from 'moment'
import * as moneyApi from '../../api/money'
import Filter from './filter.vue'
import Loading from '../../component/Loading/index'
import MoneyItem from './money-item.vue'
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../store';
const userStore = useUserStore()
const { Token,
    Userinfo } = storeToRefs(userStore)
const show = ref(false);
const popupDesc = ref(moment().format('YYYY-MM'));
const currentDate = ref(new Date()); // 默认为当前日期
const startMonth = 9; // 10 月份对应的月份索引，JavaScript 中月份从 0 开始计数
const currentYear = new Date().getFullYear(); // 获取当前年份
const minDate = ref(new Date(currentYear, startMonth, 1));
const maxDate = ref(new Date(currentYear + 5, 10, 1)); // 从今年开始的五年后
const popupConfirm = ({ selectedValue, selectedOptions }) => {
    popupDesc.value = selectedOptions.map((val) => val.text).join('');
    show.value = false;
};
const fundlistHeight = ref(0)
watch(popupDesc, () => {
})
//tabs 栏
const tabList = ref([
    {
        id: 0,
        name: "全部"
    },
    {
        id: 4,
        name: "冻结"
    },
    {
        id: 5,
        name: "解冻"
    },
    {
        id: 10,
        name: "扣款"
    },
    {
        id: 7,
        name: "充值"
    },
    {
        id: 8,
        name: "退款"
    }
])
const tipFlag = ref(false)
const totalPage = ref(0)
const totalCount = ref(0)
const loadingFlag = ref(false)
const hasNext = ref(false)
const scrollTimer = ref(null)
//列表 接口数据
const userFinanceDetail = reactive({
    userId: Userinfo.value.id,
    pageSize: 8,
    currentPage: 1,
    changeType: 0
})
//scroll-view 滑动到底部
const onScrollBottom = () => {
    if (scrollTimer.value) {
        clearTimeout(scrollTimer.value)
    }
    loadingFlag.value = true
    scrollTimer.value = setTimeout(() => {
        if (userFinanceDetail.currentPage <= totalPage.value) {
            userFinanceDetail.currentPage++
            getList(1)
        } else {
            Taro.showToast({
                title: "没有数据了呢",
                icon: "none"
            })
        }
    }, 500)
}
//获取列表
const getList = async (status) => {
    for (const key in userFinanceDetail) {
        if (userFinanceDetail[key] === 0 || userFinanceDetail[key] === "" || userFinanceDetail[key] === null) {
            delete userFinanceDetail[key];
        }
    }
    const res:any = await moneyApi.fundList(userFinanceDetail)
    if (res?.state == 200) {
        if (status) {
            moneyList.value = [...moneyList.value, ...res.data.list]
        } else {
            moneyList.value = res.data.list
        }
        totalPage.value = res.data.pageCount
        totalCount.value = res.data.totalCount
        hasNext.value = res.data.hasNext
        loadingFlag.value = false
    }
}
const moneyList = ref([
    // {
    //     id: 1,
    //     isMoney: false,
    //     title: "扣款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 0
    // },
    // {
    //     id: 2,
    //     isMoney: true,
    //     title: "加款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 1

    // },
    // {
    //     id: 3,
    //     isMoney: false,
    //     title: "扣款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 2

    // },
    // {
    //     id: 4,
    //     isMoney: false,
    //     title: "扣款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 3

    // },
    // {
    //     id: 5,
    //     isMoney: false,
    //     title: "扣款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 0

    // },
    // {
    //     id: 6,
    //     isMoney: true,
    //     title: "加款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 1

    // }, {
    //     id: 7,
    //     isMoney: false,
    //     title: "扣款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 2

    // },
    // {
    //     id: 8,
    //     isMoney: true,
    //     title: "加款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 3

    // },
    // {
    //     id: 9,
    //     isMoney: false,
    //     title: "扣款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 0

    // },
    // {
    //     id: 10,
    //     isMoney: true,
    //     title: "加款 良票放单",
    //     oId: "1174421500397248512",
    //     time: "2023-11-16 00:05:12",
    //     money: "20",
    //     type: 1

    // }
])
// 切换tabs的
const handleChange = (e) => {
    console.log(e);
    userFinanceDetail.currentPage = 1
    userFinanceDetail.changeType = e.id
    getList(0)
}
onMounted(() => {
    getList(0)
    getFundContainerList()
})
//计算 当前scroll-view 的 高度
const getFundContainerList = () => {
    const query = Taro.createSelectorQuery()
        .select(".fund-list-container-flex")
        .boundingClientRect()
    query.selectViewport()
    query.exec(function (res) {
        if (res[0]) {
            fundlistHeight.value = res[0].height
        }
    })
}
</script>
<style lang="scss">
.fund-list-container {
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // padding-top: 15px;

    .fund-list-container-row1 {
        padding: 0 20px;
        // margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .left {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left-time {
                font-size: 22px;
                margin-right: 10px;
                font-weight: 700;
            }
        }

    }

    .func-list-container-row2 {
        padding: 0 20px;
        display: flex;
        font-size: 24px;
        margin-top: 10px;
        align-items: center;

        .in {
            color: #858a99;
        }

        .on {
            color: #858a99;
            margin-left: 25px;
        }
    }

    .fund-list-container-flex {
        flex: 1;

        .flex-item {
            border-bottom: 1px solid #eee;
        }

        .flex-item:nth-child(n+2) {
            margin-top: 20px;
        }
    }

}
</style>